import React, { Component, ComponentClass } from 'react';
import Taro from '@tarojs/taro';
import {AtIcon, AtFloatLayout, AtCalendar} from 'taro-ui';
import {connect} from 'react-redux';
import Skeleton from 'taro-skeleton'
import {Block, View, Text, Image} from '@tarojs/components';
import {DateType} from '../../reducers/select-date';
import {platform} from '../../utils/platform-settting.service';
import Calendar from '../components/calendar/calendar-new'
import {
  UserIdentity,
  SiteInfo,
  Good,
  ServerNewLimitGoodsDetail,
  LimitOtherGood,
  UpDataDetail,
  ReserveGoods,
  PlatformSet, SubscriptionType
} from '../../utils/server.interface';
import {http} from '../../utils/http';
import {
  LIMIT_LIST_APPOINTMENT,
  LIMIT_FROM_SELLER_SINCE,
  OFF_USER_SALE_SUB,
  RESOURCE_URL, TARO_ENV,
  LIAN_BY_CONDITION,
  UPDATE_USER_SHARE_DATE, SCAN_BIND_SELLER,
  IDENTITY_IS_SELLER
} from '../../constants/api';
import {getLianPosterInfo} from '../../utils/poster.service'
import {user} from '../../utils/user.service';
import EnterStore from '../components/enter-store/enter-store';
import BigGoodsBox from '../../components/big-goods-box/big-goods-box';
import LimitBar from '../components/detail-bar/limit-bar';
import DetailHeader from '../components/detail-header/detail-header';
import {location} from '../../utils/location.service';
import {debounce, GetRequest, getTempSellerId, lastMinute, setTempSellerId, vcmonitor} from '../../utils/tools';
import MakePoster from '../components/make-poster/make-poster';
import SupportBar from '../../components/support-bar/support-bar';
import LiveBar from '../components/live-bar/live-bar';
import {newHttp} from "../../utils/request";
import JoinWx from "../components/join-wx/join-wx";
import Subscription from "../../components/subscription";
import CouponBox from "../components/coupon-box";
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import {h5Wx} from "../../utils/h5.service";
import {lxH5Wx} from "../../utils/lx.h5.service";
import {getContent} from "../../utils/handlerPublicCode";
import '../scenic/detail.scss';
import './detail.scss';

const status: { [key: string]: number } = {selling: 1, beginning: 0, ending: 99, sellout: -1};

type PageStateProps = {
  selectDate: DateType
}

type PageDispatchProps = {}

type PageOwnProps = {}

type PageState = {
  identityIsSeller: UserIdentity | false
  url: string
  itemId: string
  itemName: string
  sharePoster: false | { url: string }
  shopId: string
  api: string
  showCalendar: boolean
  firstGet: boolean
  height: number
  good: ServerNewLimitGoodsDetail | false
  siteInfo: SiteInfo | false
  tabIndex: number
  tabs: { title: string; name: 'notice' | 'desp' | 'appointment' | 'recommend' }[]
  recommendGood: Good[]
  sitePhone: string
  sid?: number
  is_subscribe: number
  siteServiceWx: string
  floatLayout: boolean
  notice: string
  showLoading: boolean
  goodStatus: number
  isLogin: boolean
  btnDisabled: boolean
  otherGood: LimitOtherGood[]
  reserveGoods: ReserveGoods[]
  showAppointment: boolean
  bindSellerId: number
  isHideNavigation: number
  // calendarArr: {date: string; price: number; stock_balance: number;}[];
  calendarArr: { value: string }[]
  openGroup: boolean
  platformSet?: PlatformSet
  oneMinute: boolean
  upDataDetail: UpDataDetail | false
  notices: string
  tempSellerId?: any
  description: string
  isId: boolean
  checkmeal: any
  openMp: SubscriptionType | false
  showNum: number
  localMealId: number
  locationId: number
  productId: number
}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface LoaclDetailWeb {
  props: IProps
}

@connect(({selectDate}) => ({
  selectDate,
}), () => ({}))

class LoaclDetailWeb extends Component {
  state: PageState = {
    identityIsSeller: false,
    url: '',
    itemId: '',
    itemName: '',
    sharePoster: false,
    showCalendar: false,
    shopId: '',
    api: '',
    firstGet: true,
    isHideNavigation: 0,
    height: 550,
    is_subscribe: 0,
    good: false,
    siteInfo: false,
    tabIndex: 0,
    tabs: [{title: '须知', name: 'notice'}, {title: '介绍', name: 'desp'},],
    recommendGood: [],
    sitePhone: '',
    sid: 0,
    siteServiceWx: '',
    floatLayout: false,
    notice: '',
    tempSellerId: '',
    showLoading: true,
    goodStatus: 1,
    btnDisabled: false,
    isLogin: false,
    otherGood: [],
    reserveGoods: [],
    showAppointment: false,
    bindSellerId: 0,
    calendarArr: [],
    openGroup: false,
    oneMinute: false,
    upDataDetail: false,
    notices: '',
    description: '',
    checkmeal: [],
    isId: false,
    openMp: false,
    showNum: 3,
    localMealId: 0,
    locationId: 0,
    productId: 0,
  }

  async UNSAFE_componentWillMount() {
    if (process.env.TARO_ENV === 'h5') {
      await h5Wx.getConfig()
    }
    let platformSet = platform.info
    if (!platform.isLoaded) {
      platformSet = (await platform.getSetting()) || platform.info
    }
    if (platformSet.platformName) {
      Taro.setNavigationBarTitle({
        title: platformSet.platformName
      })
    }
    const isLogin = await user.checkLogin();
    if(isLogin) {
      const identityIsSeller = await http.get(IDENTITY_IS_SELLER, {})
      this.setState({ identityIsSeller })
    }
    let id = '';
    let isId = false;
    let bindSellerId = Taro.getStorageSync('bindSellerId') || 0;
    const scene = Taro.getCurrentInstance().router.params.scene as string | undefined;
    let bindSellerIds = Taro.getCurrentInstance().router.params.bindSellerId || ''
    let tempSellerIds = Taro.getCurrentInstance().router.params.tempSellerId || ''
    if (scene && (/^\d+_\d+_\d+$/.test(scene) || /^\d+_\d+_\d+_\d+$/.test(scene))) {
      platform.scene = 0;
      const paramArr = scene.split('_'); // [ itemId, sellerId, bindSellerId, sid ] 长度不固定
      if (!paramArr[0] || !paramArr[1] || !paramArr[2]) {
        Taro.showToast({
          title: '无效的参数',
          icon: 'none'
        });
        Taro.switchTab({url: '/pages/index/index'})
        return false;
      }
      if (paramArr[1]) {
        bindSellerIds = paramArr[1]
      }
      if (paramArr[2]) {
        tempSellerIds = paramArr[2]
        setTempSellerId(tempSellerIds)
        this.setState({tempSellerId: paramArr[2]})
      }
      id = paramArr[0];
      isId = true
      if (platformSet.isSellerPermanentLock) {
        if (!bindSellerId) {
          bindSellerId = paramArr[2];
        }
      } else {
        bindSellerId = paramArr[2];
      }
    } else {
      const tempSellerId = getTempSellerId(this)
      this.setState({tempSellerId: tempSellerId})
      if (platformSet.isSellerPermanentLock) {
        if (!bindSellerId) {
          bindSellerId = Taro.getCurrentInstance().router.params.bindSellerId || bindSellerId;
        }
      } else {
        bindSellerId = Taro.getCurrentInstance().router.params.bindSellerId || bindSellerId;
      }

      if (!Taro.getCurrentInstance().router.params || !Taro.getCurrentInstance().router.params.locationId) {
        Taro.showToast({
          title: '无效的参数',
          icon: 'none'
        });
        Taro.navigateBack();
        return false;
      }
      const {itemId} = Taro.getCurrentInstance().router.params;
      id = itemId
    }
    user.bindSellerId = bindSellerId
    Taro.setStorage({
      key: 'bindSellerId',
      data: user.bindSellerId,
    })
    if (bindSellerId) {
      Taro.login({
        success: async (res) => {
          if (res.code) {
            const integralForm = {
              sellerId: bindSellerId,
              code: res.code
            }
            await http.post(LIMIT_FROM_SELLER_SINCE, integralForm);
          } else {
            console.log('登录失败！' + res.errMsg)
          }
        }
      })

    }
    if ((bindSellerIds || tempSellerIds) && process.env.DISTINGUISH_IDENTITY) {
      http.HPost(SCAN_BIND_SELLER, { temp_seller_id: tempSellerIds, refer_seller_id: bindSellerIds });
    }
    const locationId = Taro.getCurrentInstance().router.params.locationId;
    const productId = Taro.getCurrentInstance().router.params.productId;
    const detail = await this.getDetailData(locationId, productId);
    if (detail && detail.images && detail.images.length > 0) {
      try {
        Taro.getImageInfo({
          src: detail.images[0].url + "?x-oss-process=image/resize,w_750",
          success: (res) => {
            const b = 750 / res.width
            this.setState({height: res.height * b})
          }
        })
      } catch (e) {
      }
    }
    if (!detail) {
      Taro.showToast({
        title: '获取详情失败',
        icon: 'none'
      });
      return false
    }
    const good = detail
    const description = detail.attention
    const notices = detail.intro
    good['notice'] = ""
    const checkmeal = []
    if (!good.meal_valid_type) {
      if (good.meals && good.meals.length > 0) {
        good.meals.map(item => {
          checkmeal.push(item)
        })
      }
    } else if (good.meal_valid_type == 2) {
      if (good.meals && good.meals.length > 0) {
        good.meals.map(item => {
          checkmeal.push(item)
        })
      }
    }
    this.setState({ isLogin, platformSet, good, checkmeal, showLoading: false,locationId,productId, btnDisabled: true }, async () => {
      await this.initData(detail,notices, description)
      this.setState({bindSellerId})
    })
  }

  makePhone(value) {
    try {
      Taro.makePhoneCall({
        phoneNumber: value
      })
    } catch (e) {
      Taro.showToast({title: '拨打电话失败', icon: 'none'})
    }
  }

  onPullDownRefresh() {
    Taro.stopPullDownRefresh();
  }

  shareParams = ''

  async componentDidShow() {
    vcmonitor(this)
    const isLogin = await user.checkLogin();
    if (platform.subscription.show_place.indexOf("2") > -1) {
      this.setState({
        openMp: platform.subscription
      })
    }
    const tempSellerId = getTempSellerId(this)
    this.setState({tempSellerId})
    if (this.state.itemId) {
      const detail = await this.getDetailData(this.state.itemId, this.state.bindSellerId);
      if (detail) {
        const good = detail
        const description = detail.attention
        const notices = detail.intro
        good['notice'] = ""
        const checkmeal = []
        this.setState({good, checkmeal}, () => {
          this.initData(detail,notices, description)
        })
      }
    }
    let isUser = true
    if (process.env.DISTINGUISH_IDENTITY) {
      const identityIsSeller = await http.get(IDENTITY_IS_SELLER, {})
      isUser = !identityIsSeller.isSeller
    }
    this.shareParams = await user.getSellerParams(this.state.tempSellerId || getTempSellerId(this))
    this.setState({isLogin, isUser})
  }

  async componentDidHide() {
    this.setState({firstGet: false})
  }

  async componentDidMount() {
    if (process.env.TARO_ENV === 'h5') {
      const that = this
      const root = document.querySelector('.taro-tabbar__panel')
      root.onscroll = debounce((page) => {
        const {recommendGood, reserveGoods} = that.state
        const fixedTabs = document.querySelector('.h5tabs')
        const fixed = document.querySelector('.fixedTabs')
        const res = document.getElementsByClassName('ScrollTo')
        if (page[0].target.scrollTop - 54 > fixedTabs.offsetTop) {
          fixed.classList.add("fixedTabsTop")
        } else {
          if (fixedTabs) {
            fixed.classList.remove("fixedTabsTop")
          }
        }
        let index = 0;
        if (res[1].offsetTop - page[0].target.scrollTop < 55) {
          index = 1;
        }
        if (reserveGoods && reserveGoods.length > 0 && res[index + 1].offsetTop - page[0].target.scrollTop < 55) {
          index++;
        }
        if (recommendGood && recommendGood.length > 0 && res[index + 1].offsetTop - page[0].target.scrollTop < 55) {
          index++;
        }
        if (that.state.tabIndex !== index) {
          that.setState({tabIndex: index});
        }
      }, 100)
    }

  }

  async initData(detail, notices = '', description = '') {
    this.setState({
      siteServiceWx: detail.siteServiceWx || '',
      sitePhone: detail.siteServiceTelephone || '',
      itemId: detail.uuid,
      sid: detail.sid,
      itemName: detail.title,
      showLoading: false,
    })
    const oneMinute = lastMinute(detail.sell_end || 0)
    this.setState({
      otherGood: detail.otherGood || [],
      notices,
      description,
      oneMinute
    })
    if (process.env.TARO_ENV === 'h5') {
      setTimeout(()=>{
        const noticeDom = document.getElementById('notice')
        noticeDom.innerHTML = notices
      },1000)
    }
    let tabs = this.state.tabs;
      if(notices&&description){
        tabs = [{title: '须知', name: 'notice'}, {title: '介绍', name: 'desp'}];
      } else {
        tabs = [ {title: '介绍', name: 'desp'}];
      }
      this.setState({
        tabs
      })
    if (process.env.TARO_ENV === 'h5') {
      const shareData = {
        title: platform.info.platformName,
        desc: detail.name,
        link: window.location.origin + '/common/limited/localdetail?locationId=' + detail.locationId + '&productId=' + detail.id + '&' + this.shareParams,
        imgUrl: this.state.good.imageList[0]
      }
      h5Wx.share(shareData)
    }
  }

  async getDetailData(locationId = '', productId = 0) {
    if (locationId && productId) {
      const detail = await newHttp.catchGet(LIAN_BY_CONDITION, {locationId, productId});
      if (detail) {
        return detail.data
      } else {
        setTimeout(() => {
          Taro.switchTab({url: '/pages/index/index'})
        }, 2000)
        return false
      }
    } else {
      return false
    }
  }

  onShareAppMessage() {
    if (process.env.TARO_ENV !== 'tt') {
      http.post(UPDATE_USER_SHARE_DATE, {})
    }
    if (this.state.good) {
      return {
        path: '/common/limited/localdetail?locationId=' + this.state.good.locationId + '&productId=' + this.state.good.id + '&' + this.shareParams + `&sKey=${Taro.getStorageSync('sKey' || '')}`,
        title: this.state.itemName,
        imageUrl: this.state.good.imageList[0]
      };
    } else {
      return {
        path: '/common/limited/localdetail?locationId=' + this.state.good.locationId + '&productId=' + this.state.good.id + '&' + this.shareParams + `&sKey=${Taro.getStorageSync('sKey' || '')}`,
        title: this.state.itemName,
      }
    }
  }

  onShareTimeline() {
    if (process.env.TARO_ENV !== 'tt') {
      http.post(UPDATE_USER_SHARE_DATE, {})
    }
    const {itemName, itemId,good} = this.state
    if (good) {
      return {
        title: itemName,
        imageUrl: good.imageList[0],
        query: 'locationId=' + this.state.good.locationId + '&productId=' + this.state.good.id + '&itemId=' + itemId + '&' + this.shareParams + `&sKey=${Taro.getStorageSync('sKey' || '')}`,
      }
    } else {
      return {
        title: itemName,
        query: 'locationId=' + this.state.good.locationId + '&productId=' + this.state.good.id + '&itemId=' + itemId + '&' + this.shareParams + `&sKey=${Taro.getStorageSync('sKey' || '')}`,
      }
    }
  }

  async navigate(address: string) {
    if (this.state.platformSet.isHideNavigation == 1) {
      return false;
    }
    Taro.showLoading({title: '导航中...'})
    const ret = await location.getCoordinate(address)
    Taro.hideLoading()
    if (ret) {
      lxH5Wx.navigation(ret.lat, ret.lng, address)
    } else {
      Taro.showToast({title: '导航失败,请检查地址信息,请检测地址', icon: 'none'})
    }
  }

  tabsClick(value = 0) {
    const tabs = this.state.tabs;
    const select = tabs[value];
    if (process.env.TARO_ENV === 'weapp' || process.env.TARO_ENV === 'tt') {
      const query = Taro.createSelectorQuery();
      query.selectViewport().scrollOffset();
      switch (select.name) {
        case 'recommend':
          query.select('#recommend').boundingClientRect();
          break;
        case 'notice':
          query.select('#notice').boundingClientRect();
          break;
        case 'desp':
          query.select('#description').boundingClientRect();
          break;
        case 'appointment':
          query.select('#appointment').boundingClientRect();
          break;

        default:
          break;
      }
      query.exec(res => {
        Taro.pageScrollTo({
          duration: 300,
          scrollTop: res[0].scrollTop + res[1].top - (process.env.TARO_ENV === 'tt' ? 0 : 54)
        })
      })

    } else {
      const a = document.getElementsByClassName('ScrollTo')
      if (a[value]) {
        Taro.pageScrollTo({
          duration: 300,
          scrollTop: a[value].offsetTop - 54
        })
      }
    }
  }

  onPageScroll = debounce((scroll) => {

  }, 100)
  posterRef = React.createRef<any>();

  async getPoste() {
    const isLogin = await user.checkLogin();
    if (!isLogin) {
      const timer = setTimeout(() => {
        clearTimeout(timer)
        user.jumpLogin()
      }, 500);
      return
    }
    if (this.posterRef.current !== undefined) {
      this.posterRef.current.show();
    }
  }

  async onGetPoster() {
    Taro.showLoading({title: '获取海报中...'});
    const shareParams = await user.getMovieSellerParams(this.state.tempSellerId)
    const poster = await getLianPosterInfo({tempSellerId: this.state.tempSellerId,path: '/common/limited/localdetail?locationId=' + this.state.good.locationId + '&productId=' + this.state.good.id, scene: shareParams}, this.state.good.imageList[0],this.state.good,this.state.localMealId)
    Taro.hideLoading();
    if (poster) {
      Taro.navigateTo({url: '/distributor/poster/poster?url=' + poster.url})
    } else {
      Taro.showToast({title: '获取海报失败！', icon: 'none'})
    }
  }

  async navigateOut(latitude, longitude) {
    lxH5Wx.navigation(latitude, longitude)
  }

  async changeGood(uuid) {
    Taro.showLoading({title: '加载中...'});
    const detail = await this.getDetailData(uuid, this.state.bindSellerId);
    if (detail) {
      const good = detail
      const {notice, description} = detail
      good['notice'] = ""
      const checkmeal = []
      if (!good.meal_valid_type) {
        if (good.meals && good.meals.length > 0) {
          good.meals.map(item => {
            checkmeal.push(item)
          })
        }
      } else if (good.meal_valid_type == 2) {
        if (good.meals && good.meals.length > 0) {
          good.meals.map(item => {
            checkmeal.push(item)
          })
        }
      }
      this.setState({good, checkmeal}, () => {
        this.initData(good, notice, description);
      })
    }
    Taro.hideLoading();
  }

  async showAppointmentHandle(uuid = '') {
    Taro.showLoading({title: '加载数据中...'});
    const ret = await http.get<{ date: string; price: number; stock_balance: number }[]>(LIMIT_LIST_APPOINTMENT, {goodsUuid: uuid})
    if (ret && ret.length > 0) {
      this.setState({
        calendarArr: ret.map(item => {
          if (item.stock_balance > 0) {
            return {surplusStock: item.surplus_stock, value: item.date}
          } else {
            return {surplusStock: item.surplus_stock, value: false}
          }
        })
      }, () => {
        this.setState({showCalendar: true})
      })
    }
    Taro.hideLoading();

  }

  getMSG() {
    this.setState({
      is_subscribe: 1
    })
  }

  async removeMSG() {
    const {good} = this.state
    const that = this
    const uuid = good.uuid
    const ret = await http.postCar(OFF_USER_SALE_SUB, {goodsUUID: uuid})
    if (ret == '取消成功') {
      that.setState({is_subscribe: 0})
    } else {
      Taro.showToast({title: '取消失败', icon: 'none'})
    }
  }

  handleClickGroup() {
    const openGroup = this.state.openGroup
    this.setState({
      openGroup: !openGroup
    })
  }

  inOneMinute() {
    this.setState({
      oneMinute: true,
      goodStatus: 1
    })
  }

  checkMeal(index) {
    const {good, checkmeal} = this.state
    if (good.meal_valid_type) {
      if (!good.meals[index].check) {
        if (good.meal_valid_num > checkmeal.length) {
          good.meals[index].check = true
        }
      } else {
        good.meals[index].check = false
      }
      const meals = []
      good.meals.map(item => {
        if (item.check) {
          meals.push(item)
        }
      })
      this.setState({
        good, checkmeal: meals
      })

    }
  }

  goPey() {
    const {good, isLogin, checkmeal, upDataDetail} = this.state
    const gooddata = {}
    gooddata['img'] = good.images[0].url
    gooddata['name'] = good.name
    gooddata['price'] = good.price
    gooddata['images'] = good.images
    Taro.setStorage({
      key: "placeOrder",
      data: JSON.stringify(gooddata),
      success: async function () {
        if (!isLogin) {
          user.jumpLogin()
        } else {
          if (good.meal_valid_type && checkmeal.length < good.meal_valid_num) {
            Taro.showToast({title: `您还需选${good.meal_valid_num - checkmeal.length}个套餐`, icon: 'none', duration: 2000})
          } else {
            const mealArrId = []
            checkmeal.map(item => {
              mealArrId.push(item.id)
            })
            Taro.setStorageSync("checkmeal", checkmeal)
            if (good.isSelf) {
              Taro.navigateTo({url: '/main/order/place?itemId=' + good.id + '&m=limited'})
            } else {
              Taro.navigateTo({url: '/main/order/confirm?itemId=' + good.id + '&m=limited&meal=' + mealArrId.join(",") + '&zero=' + upDataDetail.can_zero_buy})
            }
          }
        }
      }
    })
  }

  localMeal(index) {
    this.setState({localMealId:index})
  }

  toggleMeals(showNum) {
    const {good} = this.state
    if (showNum == 3) {
      this.setState({showNum: good.meals.length})
    } else {
      this.setState({showNum: 3})
    }
  }
  gotoShopList(){
    Taro.setStorageSync('localShopList',this.state.good.shops)
    Taro.navigateTo({url:'/common/local-life/list'})
  }
  render() {
    const {
      localMealId,productId,locationId,identityIsSeller,tempSellerId,isUser,
      showCalendar, good, siteInfo, recommendGood, sitePhone, siteServiceWx, floatLayout, notice, showLoading, goodStatus, btnDisabled, isLogin, otherGood, reserveGoods,
      showAppointment, calendarArr, platformSet, height, openGroup, is_subscribe, oneMinute, upDataDetail, description, notices, checkmeal, openMp, showNum
    } = this.state;
    return (
      <View className='limitedDetailRoot'>
        <GzhAuth />
        <Skeleton loading={showLoading}
          title
          titleWidth='100%' rowHeight='275px'
        >
          <View className='swiper-box'>
            <DetailHeader localState height={height} videoId={good.qq_video_id || ''} mp3={good.mp3 || ''}
              imagesList={(good && good.imageList.map(item => item)) || []}
            />
          </View>
        </Skeleton>
        {good&&<Skeleton loading={showLoading}
          title
          titleWidth='100%' rowHeight='150px'
        >
        <View className='local-detail'>
          <View className='local-title'>{good.title}</View>
          <View className='local-desc'>{good.description}</View>
          <View className='local-price-box'>
            <View className='lt'>
              <View className='xianjia'>
                <Text className='r-icon'>¥</Text>
                <Text className='price'>{good.specList[localMealId].salePrice}</Text>
              </View>
              <View className='yuanjia'>市场价 ¥{good.specList[localMealId].marketPrice}</View>
            </View>
            {!!identityIsSeller&&identityIsSeller.isSeller&&<View className='rt'>
              <View>
                <Image lazyLoad src='https://resource.ivcheng.com/resources/weapp/images/local-icon2.png' mode='widthFix'
                  className='data-img'
                />
              </View>
              <View className='yongj'>
                佣金 <Text className='r-icon'>¥</Text> {good.specList[localMealId].sellerProfit}
              </View>
            </View>}
          </View>
          <View className='local-data'>
            <View />
            {process.env.TARO_ENV !== 'tt' && process.env.P_ENV !== 'hiyogo' && !!platform.info.is_show_stock && <View>库存:{good.channelStock}</View>}
            {process.env.TARO_ENV === 'tt' &&  <View>库存:{good.channelStock}</View>}
          </View>
        </View>
        </Skeleton>}
        <Skeleton loading={showLoading}
          title
          titleWidth='100%' rowHeight='50px'
        >
        <View className='local-meal-box'>
          <View className='title'>选择套餐</View>
          <View className='local-meal-list'>
            {!!good && good.specList.map((item, index) =>
              <View key={index} onClick={this.localMeal.bind(this, index,item)} className={`item  ${localMealId == index ? "local-meal-active" : null}`} >
                {item.specName}
                {localMealId==index&&<Image className='local-meal-img' src='https://resource.ivcheng.com/resources/weapp/images/local-icon.png'
                  mode='widthFix'
                />}
              </View>
            )}
          </View>
        </View>
        </Skeleton>
        {good&&<View className='local-rule-add-box'>
          <View className='local-rule-two'>
            <View className='lt'>
              <View className='lt'>门店</View>
              <View className='info'>
                {good.shops[0].name}
              </View>
            </View>
            <View onClick={this.gotoShopList.bind(this)} className='rt'>{good.shops.length}家店适用 <AtIcon size='12px' prefixClass='car' value='iconright'
              color='#686868'
            /></View>
          </View>
          <View className='local-meal-address'>{good.shops[0].address}</View>
        </View>}
        <Skeleton title row={3} loading={showLoading}>
          <Block>
            {!!good.open_meal && good.meals && good.meals.length > 0 && <View className='meals-good other-good'>
              <View className='Mtitle'>套餐包含
                {good.meal_valid_type && good.meal_valid_type == 1 ?
                  <Block>
                    <Text>({checkmeal.length}/{good.meals.length})</Text>
                    <View className='other-good-more'
                      onClick={this.handleClickGroup.bind(this)}
                    >{good.meal_valid_num ? `共需选${good.meal_valid_num}个` : ''}<Text>选择</Text></View>
                  </Block>
                  :
                  <Block>
                    <Text>({good.meals.length})</Text>
                    <View
                      className='other-good-more'
                    >{!good.meal_valid_type ? '' : `最多使用${good.meal_valid_num}个`}</View>
                  </Block>
                }
              </View>
              {good.meals.map((item, i) =>
                <Block>
                  {i < showNum && <View key={i} style='display:block' className='good-item'>
                    <View className='good-item-top'>
                      <Text className='title'>· {item.productName}</Text>
                      <Text className='price'>x{item.amount}</Text>
                    </View>
                    {good.meal_valid_date_set === 0 && <View className='meal_time'>
                      {item.validDate}
                    </View>}
                  </View>}
                </Block>)}
              {good.meals.length > 3 &&
              <View className='good_meals_more' onClick={this.toggleMeals.bind(this, showNum)}>{showNum > 3 ?
                <Block>收起<AtIcon value='chevron-up' size='15' color='#eb5a15' /></Block> :
                <Block>查看更多<AtIcon value='chevron-down' size='15' color='#eb5a15' /></Block>}</View>}
            </View>}
          </Block>
        </Skeleton>
        <Skeleton row={5} loading={showLoading}>
          <Block>
            {otherGood && otherGood.length > 0 && <View className='other-good'>
              <View className='Mtitle'>关联商品</View>
              {otherGood.map(item => <View key={item.id}
                className={`good-item ${good.uuid === item.uuid ? 'selected' : ''}`}
                onClick={this.changeGood.bind(this, item.uuid)}
              >
                <Text className='title'>{item.name}</Text>
                <Text className='price'><Text className='symbol'>¥</Text>{item.price}</Text>
              </View>)}
            </View>}
            {upDataDetail.couponLabel && upDataDetail.couponLabel.length > 0 &&
            <CouponBox list={upDataDetail.couponLabel} isLogin={isLogin} category={good.category || 0}
              goodsId={good.id}
            />}
          </Block>
        </Skeleton>
        {good.sid && process.env.TARO_ENV !== 'tt' && <JoinWx sid={good.sid} phone={sitePhone} />}
        {Object.keys(siteInfo).length != 0 && <EnterStore siteInfo={siteInfo} />}
        {/*<View className={`${process.env.TARO_ENV}tabs fixedTabs`}>*/}
        {/*  <AtTabs current={tabIndex} tabList={tabs} onClick={this.tabsClick.bind(this)}></AtTabs></View>*/}
        {description&&<View className='detail-content ScrollTo'>
          <View className='rich-content' id='description'>
            {process.env.TARO_ENV === "weapp" && <parser html={description || ''} />}
            {process.env.TARO_ENV === "tt" && <rich-text preview selectable nodes={getContent(description)} />}
          </View>
        </View>}
        {notices&&<View className='detail-content ScrollTo'>
          <View className='rich-content' id='notice'>
            {process.env.TARO_ENV === "weapp" && <parser html={notices || ''} />}
            {process.env.TARO_ENV === "tt" && <rich-text preview selectable nodes={getContent(notices)} />}
          </View>
        </View>}

        {!!reserveGoods && reserveGoods.length > 0 &&
        <View className='detail-content '>
          <View id='appointment' className='rich-content'>
            <View className='appointment'>
              {reserveGoods.length > 0 && reserveGoods.map(item => <View className='appoint-item' key={item.uuid}
                onClick={this.showAppointmentHandle.bind(this, item.uuid)}
              >
                <View className='appoint-title'>{item.name}</View>
                <Text className='at-icon at-icon-chevron-right' style='color:#666;' />
              </View>)}
            </View>
          </View>
        </View>}
        {showCalendar && <Calendar dataInfo={calendarArr} onClose={() => {
          this.setState({showCalendar: false})
        }} type='range'
        />}
        {TARO_ENV !== 'h5' && <Subscription data={openMp} />}
        {TARO_ENV === 'h5' && platform.subscription && platform.subscription.show_place.indexOf("1") > -1 && <Subscription data={platform.subscription} />}
        {recommendGood.length > 0 && <View className='recommend-goods-box ScrollTo' id='recommend'>
          <View className='title'>猜你喜欢</View>
          <View className='good'>
            <BigGoodsBox isUser={isUser} data={recommendGood} />
          </View>
        </View>}
        {process.env.TARO_ENV === "weapp" && good.live_room_id && <LiveBar roomId={good.live_room_id} />}
        <SupportBar />
        <View style={{height: "100px"}} />
        <LimitBar isLL={1} isShowShareButton showLoading={showLoading} uuid={good.uuid} platformSet={platformSet} oneMinute={oneMinute}
          isSaler={good.status} subscribe={is_subscribe} groupDetail={null} groupBuyId={null}
          inSale={good.status} zeroBuy={upDataDetail.can_zero_buy}
          showService={Boolean(good.is_show_customer_service)} getMSG={this.getMSG.bind(this)}
          removeMSG={this.removeMSG.bind(this)} onGotoBuy={() => {
                    if (!isLogin) {
                      user.jumpLogin()
                    } else {
                      Taro.navigateTo({url: '/main/order/pay?itemId=' + good.specList[localMealId].specId + '&productId=' + productId + '&locationId=' + locationId + '&tempSellerId=' + tempSellerId})
                    }
        }} onGotoHome={() => {
          Taro.switchTab({url: '/pages/index/index'})
        }} status={goodStatus} disabled={btnDisabled} onGetPoster={this.getPoste.bind(this)} onContact={() => {
          Taro.navigateTo({url: `/distributor/contact/contact${sitePhone ? '?phone=' + sitePhone + (siteServiceWx ? '&weixin=' + siteServiceWx : '') : (siteServiceWx ? '?weixin=' + siteServiceWx : '')}`})
        }}
        />
        <AtFloatLayout isOpened={floatLayout} title='购买须知' scrollY onClose={() => {
          this.setState({floatLayout: false})
        }}
        >
          <View className='float-layout'>
            {process.env.TARO_ENV === "weapp" && <parser html={notice || ''} />}
            {process.env.TARO_ENV === "tt" && <rich-text preview selectable nodes={getContent(notice)} />}
          </View>
        </AtFloatLayout>
        {!showLoading && <MakePoster cref={this.posterRef} lianlainPath={'/common/limited/localdetail?locationId=' + this.state.good.locationId + '&productId=' + this.state.good.id + '&scene=' +this.shareParams} friendsArr={good.imageList} posterType='lianlian' good={good} uuid={good.uuid} text={good.description}
          itemId={good.uuid} localMealId={localMealId} showButton={false} onGetPoster={async () => {
          await this.onGetPoster()
        }}
        />}
        <AtFloatLayout isOpened={showAppointment} onClose={() => {
          this.setState({showAppointment: false})
        }}
        >
          <AtCalendar validDates={calendarArr} />
        </AtFloatLayout>
        {!!good.open_meal && good.meals && good.meals.length > 0 &&
        <Block><AtFloatLayout isOpened={openGroup} title={`套餐包含 已选${checkmeal.length}个，共需选${good.meal_valid_num || 0}个`}
          onClose={this.handleClickGroup.bind(this)} scrollY
        >
          {good.meals.map((val, i) =>
            <View className='group-item' key={i}>
              <View className='group-name'>
                <View className='group-product' onClick={this.checkMeal.bind(this, i)}>{good.meal_valid_type == 1 &&
                <View className='group-check'>{val.check && <Image
                  src={RESOURCE_URL + "/resources/weapp/images/xuan.png"}
                />}{checkmeal.length == good.meal_valid_num &&
                <View className='disable' />}</View>}<Text
                  className='group-productName'
                >{val.productName}</Text><Text className='group-num'>x{val.amount}</Text></View>
              </View>

            </View>
          )}
        </AtFloatLayout>
          {openGroup && <View className='goPey' onClick={this.goPey.bind(this)}>确定</View>}
        </Block>}
      </View>

    );
  }
}

export default LoaclDetailWeb as ComponentClass<PageOwnProps, PageState>;
